<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles/profile.css">
  </head>
  <body>
    <div id="main-container" class="centered-container" style="display:none;">
      <div>
        <div>
          <label id="game-summary" class="header-text"></label>
        </div>
        <div>
          <!-- Dreamer Summary -->
          <label>Tucked-in Pokémon Summary</label><br>
          <table id="dreamer-summary" class="dreamer-summary">
            <tr>
              <td id="dreamer-sprite" class="dreamer-sprite" rowspan="5">
                <image src="/sprites/pokemon/normal/0.png"/>
              </td>
            </tr>
            <tr>
              <th>Species</th>
              <td id="dreamer-species"></td>
              <th>Ability</th>
              <td id="dreamer-ability"></td>
            </tr>
            <tr>
              <th>Name</th>
              <td id="dreamer-name"></td>
              <th>Nature</th>
              <td id="dreamer-nature"></td>
            </tr>
            <tr>
              <th>Trainer</th>
              <td id="dreamer-trainer"></td>
              <th>Gender</th>
              <td id="dreamer-gender"></td>
            </tr>
            <tr>
              <th>Trainer ID</th>
              <td id="dreamer-trainer-id"></td>
              <th>Level</th>
              <td id="dreamer-level"></td>
            </tr>
          </table>
        </div>
        <div>
          <!-- Entree Forest Encounter Configuration -->
          <label>Entree Forest Encounters (Max. 10)</label><br>
          <div>
            <table id="encounter-table" class="encounter-image-table">
              <tr>
                <td id="encounter0" onclick="configureEncounter(0)"><image src="/sprites/pokemon/normal/0.png"/></td>
                <td id="encounter1" onclick="configureEncounter(1)"><image src="/sprites/pokemon/normal/0.png"/></td>
                <td id="encounter2" onclick="configureEncounter(2)"><image src="/sprites/pokemon/normal/0.png"/></td>
                <td id="encounter3" onclick="configureEncounter(3)"><image src="/sprites/pokemon/normal/0.png"/></td>
                <td id="encounter4" onclick="configureEncounter(4)"><image src="/sprites/pokemon/normal/0.png"/></td>
              </tr>
              <tr>
                <td id="encounter5" onclick="configureEncounter(5)"><image src="/sprites/pokemon/normal/0.png"/></td>
                <td id="encounter6" onclick="configureEncounter(6)"><image src="/sprites/pokemon/normal/0.png"/></td>
                <td id="encounter7" onclick="configureEncounter(7)"><image src="/sprites/pokemon/normal/0.png"/></td>
                <td id="encounter8" onclick="configureEncounter(8)"><image src="/sprites/pokemon/normal/0.png"/></td>
                <td id="encounter9" onclick="configureEncounter(9)"><image src="/sprites/pokemon/normal/0.png"/></td>
              </tr>
            </table>
          </div>
        </div>
        <div id="visitor-table-container" style="display:none;">
        <!-- Join Avenue Visitor Configuration -->
          <label>Join Avenue Visitors (Max. 12)</label><br>
          <div>
            <table id="visitor-table" class="visitor-table">
              <tr>
                <td id="visitor0" onclick="configureVisitor(0)"><image src="/sprites/trainers/none.png"/></td>
                <td id="visitor1" onclick="configureVisitor(1)"><image src="/sprites/trainers/none.png"/></td>
                <td id="visitor2" onclick="configureVisitor(2)"><image src="/sprites/trainers/none.png"/></td>
                <td id="visitor3" onclick="configureVisitor(3)"><image src="/sprites/trainers/none.png"/></td>
                <td id="visitor4" onclick="configureVisitor(4)"><image src="/sprites/trainers/none.png"/></td>
                <td id="visitor5" onclick="configureVisitor(5)"><image src="/sprites/trainers/none.png"/></td>
              </tr>
              <tr>
                <td id="visitor6" onclick="configureVisitor(6)"><image src="/sprites/trainers/none.png"/></td>
                <td id="visitor7" onclick="configureVisitor(7)"><image src="/sprites/trainers/none.png"/></td>
                <td id="visitor8" onclick="configureVisitor(8)"><image src="/sprites/trainers/none.png"/></td>
                <td id="visitor9" onclick="configureVisitor(9)"><image src="/sprites/trainers/none.png"/></td>
                <td id="visitor10" onclick="configureVisitor(10)"><image src="/sprites/trainers/none.png"/></td>
                <td id="visitor11" onclick="configureVisitor(11)"><image src="/sprites/trainers/none.png"/></td>
              </tr>
            </table>
          </div>
        </div>
        <div>
          <!-- Item Configuration -->
          <label>Items (Max. 20)</label><br>
          <div>
            <table id="item-table" class="item-table">
              <tr>
                <td id="item0" onclick="configureItem(0)"><image src="/sprites/items/0.png"/></td>
                <td id="item1" onclick="configureItem(1)"><image src="/sprites/items/0.png"/></td>
                <td id="item2" onclick="configureItem(2)"><image src="/sprites/items/0.png"/></td>
                <td id="item3" onclick="configureItem(3)"><image src="/sprites/items/0.png"/></td>
                <td id="item4" onclick="configureItem(4)"><image src="/sprites/items/0.png"/></td>
                <td id="item5" onclick="configureItem(5)"><image src="/sprites/items/0.png"/></td>
                <td id="item6" onclick="configureItem(6)"><image src="/sprites/items/0.png"/></td>
                <td id="item7" onclick="configureItem(7)"><image src="/sprites/items/0.png"/></td>
                <td id="item8" onclick="configureItem(8)"><image src="/sprites/items/0.png"/></td>
                <td id="item9" onclick="configureItem(9)"><image src="/sprites/items/0.png"/></td>
              </tr>
              <tr>
                <td id="item10" onclick="configureItem(10)"><image src="/sprites/items/0.png"/></td>
                <td id="item11" onclick="configureItem(11)"><image src="/sprites/items/0.png"/></td>
                <td id="item12" onclick="configureItem(12)"><image src="/sprites/items/0.png"/></td>
                <td id="item13" onclick="configureItem(13)"><image src="/sprites/items/0.png"/></td>
                <td id="item14" onclick="configureItem(14)"><image src="/sprites/items/0.png"/></td>
                <td id="item15" onclick="configureItem(15)"><image src="/sprites/items/0.png"/></td>
                <td id="item16" onclick="configureItem(16)"><image src="/sprites/items/0.png"/></td>
                <td id="item17" onclick="configureItem(17)"><image src="/sprites/items/0.png"/></td>
                <td id="item18" onclick="configureItem(18)"><image src="/sprites/items/0.png"/></td>
                <td id="item19" onclick="configureItem(19)"><image src="/sprites/items/0.png"/></td>
              </tr>
            </table>
          </div>
        </div>
        <div>
          <!-- Misc Configurations -->
          <div class="grid-container">
            <div>
              <label>C-Gear Skin | </label><a href="#" onclick="return previewSkin('cgear-skin', 'CGEAR')">Preview</a>
              <select id="cgear-skin">
                <option value="none">Do not change</option>
                <option disabled>──────────────────────</option>
              </select>
              <button onclick="openFileChooser('cgear-file-input')">Upload Custom</button>
              <input id="cgear-file-input" type="file" accept=".png, .bmp, .jpg, .jpeg" onchange="uploadSkin('CGEAR', this.files[0])" onclick="this.value = null;" hidden/>
            </div>
            <div>
              <label>Pokédex Skin | </label><a href="#" onclick="return previewSkin('dex-skin', 'ZUKAN')">Preview</a>
              <select id="dex-skin">
                <option value="none">Do not change</option>
                <option disabled>──────────────────────</option>
              </select>
              <button onclick="openFileChooser('dex-file-input')">Upload Custom</button>
              <input id="dex-file-input" type="file" accept=".png, .bmp, .jpg, .jpeg" onchange="uploadSkin('ZUKAN', this.files[0])" onclick="this.value = null;" hidden/>
            </div>
            <div>
              <label>Musical Show</label>
              <select id="musical">
                <option value="none">Do not change</option>
                <option disabled>──────────────────────</option>
              </select>
            </div>
            <div>
              <label>Level Gain</label>
              <input id="level-gain-input" type="number" value="0" min="0" max="99"/>
            </div>
          </div>
        </div>
        <div>
          <button id="save" class="big-button" onclick="postProfileData()">Save Profile</button>
          <button id="logout" class="big-button" onclick="postLogout()">Log Out</button>
        </div>
      </div>
    </div>
    <!-- Entree Forest Encounter Configuration Form -->
    <div id="encounter-config" class="popup">
      <div class="centered-container">
        <div class="content">
          <button class="close-button" onclick="closeEncounterForm()">X</button>
          <form id="encounter-form">
            <label for="encounter-form-species">Species</label>
            <select id="encounter-form-species" name="species" value="1">
              <!-- Filled by profile.js -->
            </select>
            <label for="encounter-form-move">Special Move</label>
            <select id="encounter-form-move" name="move" value="0">
              <option value="0">None</option>
              <!-- Filled by profile.js -->
            </select>
            <label for="encounter-form-form">Form</label>
            <select id="encounter-form-form" name="form" value="0">
              <option value="0">N/A</option>
              <!-- Filled by profile.js -->
            </select>
            <label for="encounter-form-gender">Gender</label>
            <select id="encounter-form-gender" name="gender" value="GENDERLESS">
              <option value="MALE">Male</option>
              <option value="FEMALE">Female</option>
              <option value="GENDERLESS">Random</option>
            </select>
            <label for="encounter-form-animation">Animation</label>
            <select id="encounter-form-animation" name="animation">
              <option value="LOOK_AROUND">Look Around</option>
              <option value="WALK_AROUND">Walk Around</option>
              <option value="WALK_LOOK_AROUND">Walk and Look Around</option>
              <option value="WALK_VERTICALLY">Walk Vertically</option>
              <option value="WALK_HORIZONTALLY">Walk Horizontally</option>
              <option value="WALK_LOOK_HORIZONTALLY">Walk Horizontally and Look Around</option>
              <option value="SPIN_RIGHT">Spin Right</option>
              <option value="SPIN_LEFT">Spin Left</option>
            </select>
          </form>
          <button class="big-button" onclick="saveEncounter()">Confirm</button>
          <button class="big-button" onclick="removeEncounter()">Remove</button>
        </div>
      </div>
    </div>
    <!-- Item Configuration Form -->
    <div id="item-config" class="popup">
      <div class="centered-container">
        <div class="content">
          <button class="close-button" onclick="closeItemForm()">X</button>
          <form id="item-form">
            <label for="item-form-id">Item</label>
            <select id="item-form-id" name="id" value="1">
              <!-- Filled by profile.js -->
            </select>
            <label for="item-form-quantity">Quantity</label>
            <input id="item-form-quantity" name="quantity" type="number" value="1" min="1" max="20"/>
          </form>
          <button class="big-button" onclick="saveItem()">Confirm</button>
          <button class="big-button" onclick="removeItem()">Remove</button>
        </div>
      </div>
    </div>
    <!-- Join Avenue Visitor Configuration Form -->
    <div id="visitor-config" class="popup">
      <div class="centered-container">
        <div class="content">
          <button class="close-button" onclick="closeVisitorForm()">X</button>
          <form id="visitor-form">
            <label for="visitor-form-name">Name (Max. 7 characters)</label>
            <input id="visitor-form-name" type="text" name="name" placeholder="Trainer" maxlength="7"/>
            <label for="visitor-form-type">Trainer Class</label>
            <select id="visitor-form-type" name="type" value="ACE_TRAINER_MALE">
              <option value="YOUNGSTER">Youngster</option>
              <option value="LASS">Lass</option>
              <option value="ACE_TRAINER_MALE">Ace Trainer (Male)</option>
              <option value="ACE_TRAINER_FEMALE">Ace Trainer (Female)</option>
              <option value="RANGER_MALE">Pokémon Ranger (Male)</option>
              <option value="RANGER_FEMALE">Pokémon Ranger (Female)</option>
              <option value="BREEDER_MALE">Pokémon Breeder (Male)</option>
              <option value="BREEDER_FEMALE">Pokémon Breeder (Female)</option>
              <option value="SCIENTIST_MALE">Scientist (Male)</option>
              <option value="SCIENTIST_FEMALE">Scientist (Female)</option>
              <option value="HIKER">Hiker</option>
              <option value="PARASOL_LADY">Parasol Lady</option>
              <option value="ROUGHNECK">Roughneck</option>
              <option value="NURSE">Nurse</option>
              <option value="PRESCHOOLER_MALE">Preschooler (Male)</option>
              <option value="PRESCHOOLER_FEMALE">Preschooler (Female)</option>
            </select>
            <label for="visitor-form-shop-type">Shop Type</label>
            <select id="visitor-form-shop-type" name="shopType" value="RAFFLE">
              <option value="RAFFLE">Raffle Shop</option>
              <option value="FLORIST">Flower Shop</option>
              <option value="SALON">Beauty Salon</option>
              <option value="ANTIQUE">Antique Shop</option>
              <option value="DOJO">Training Dojo</option>
              <option value="CAFE">Café</option>
              <option value="MARKET">Market</option>
            </select>
            <label for="visitor-form-game">Game of Origin (Affects which goods/services are sold)</label>
            <select id="visitor-form-game" name="gameVersion" value="BLACK_ENGLISH">
              <option value="BLACK_ENGLISH">Black Version</option>
              <option value="WHITE_ENGLISH">White Version</option>
              <option value="BLACK_2_ENGLISH">Black Version 2</option>
              <option value="WHITE_2_ENGLISH">White Version 2</option>
              <option value="BLACK_FRENCH">Version Noire</option>
              <option value="WHITE_FRENCH">Version Blanche</option>
              <option value="BLACK_2_FRENCH">Version Noire 2</option>
              <option value="WHITE_2_FRENCH">Version Blanche 2</option>
              <option value="BLACK_ITALIAN">Versione Nera</option>
              <option value="WHITE_ITALIAN">Versione Bianca</option>
              <option value="BLACK_2_ITALIAN">Versione Nera 2</option>
              <option value="WHITE_2_ITALIAN">Versione Bianca 2</option>
              <option value="BLACK_GERMAN">Schwarze Edition</option>
              <option value="WHITE_GERMAN">Weisse Edition</option>
              <option value="BLACK_2_GERMAN">Schwarze Edition 2</option>
              <option value="WHITE_2_GERMAN">Weisse Edition 2</option>
              <option value="BLACK_SPANISH">Edicion Negra</option>
              <option value="WHITE_SPANISH">Edicion Blanca</option>
              <option value="BLACK_2_SPANISH">Edicion Negra 2</option>
              <option value="WHITE_2_SPANISH">Edicion Blanca 2</option>
              <option value="BLACK_JAPANESE">ブラック</option>
              <option value="WHITE_JAPANESE">ホワイト</option>
              <option value="BLACK_2_JAPANESE">ブラック2</option>
              <option value="WHITE_2_JAPANESE">ホワイト2</option>
              <option value="BLACK_KOREAN">블랙</option>
              <option value="WHITE_KOREAN">화이트</option>
              <option value="BLACK_2_KOREAN">블랙2</option>
              <option value="WHITE_2_KOREAN">화이트2</option>
            </select>
            <label for="visitor-form-region">Country</label>
            <select id="visitor-form-region" name="region" value="1">
              <!-- Filled by profile.js -->
            </select>
            <label for="visitor-form-subregion">State/Province</label>
            <select id="visitor-form-subregion" name="subregion" value="0">
              <option value="0">N/A</option>
              <!-- Filled by profile.js -->
            </select>
            <label for="visitor-form-personality">Personality (Affects phrases used)</label>
            <input id="visitor-form-personality" name="personality" type="number" value="0" min="0" max="7"/>
            <label for="visitor-form-dreamer">Tucked-in Pokémon Species</label>
            <select id="visitor-form-dreamer" name="dreamerSpecies" value="1">
              <!-- Filled by profile.js -->
            </select>
          </form>
          <button class="big-button" onclick="saveVisitor()">Confirm</button>
          <button class="big-button" onclick="removeVisitor()">Remove</button>
        </div>
      </div>
    </div>
    <div id="skin-preview" class="popup">
      <div class="centered-container">
        <div id="skin-preview-content" class="content">
          <button class="close-button" onclick="closeSkinPreview()">X</button>
          <label>Skin Preview</label><br>
          <img id="skin-preview-image" width=256 height=192/>
          <div>
            <label>Resolution</label><br>
            <input id="resolution-x1" type="radio" name="resolution" onclick="setSkinPreviewResolution(256, 192);" checked/>
            <label for="resolution-x1">x1</label>
            <input id="resolution-x2" type="radio" name="resolution" onclick="setSkinPreviewResolution(512, 384);"/>
            <label for="resolution-x2">x2</label>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="scripts/utility.js"></script>
  <script src="scripts/pokedata.js"></script>
  <script src="scripts/profile.js"></script>
</html>
